<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Image Gallery</title>    
    <style type="text/css">
		html {
			height:100%;
			background:#EEE;
			background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
			background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
    	}
    	body {
			width:100%;
			height:100%;
			margin:0;
		}
		h1{
			font-size:16px; 
			color:#B5FF00;
			font-weight:normal;
			margin:0;
		}
		.container{
			position:absolute;
			width:744px;
			height:486px;
			top:50%;
			left:50%;
			margin-top:-243px;
			margin-left:-372px;
		}
	</style>
    <link rel="stylesheet" type="text/css" href="wt-gallery.css"/>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.wt-gallery.min.js"></script>
    <script type="text/javascript">
		$(document).ready(	
			function() {
				$(".container").wtGallery({
					num_display:5,
					screen_width:720,
					screen_height:360,
					padding:10,
					thumb_width:125,
					thumb_height:70,
					thumb_margin:5,					
					thumbnails_align:"bottom",
					text_align:"top",
					caption_align:"bottom",
					auto_rotate:false,
					delay:5000,					
					rotate_once:false,
					auto_center:true,
					cont_imgnav:true,
					cont_thumbnav:true,
					display_play:true,
					display_imgnav:true,
					display_imgnum:true,
					display_timer:true,
					display_thumbnav:true,
					display_indexes:true,					
					display_thumbnum:false,
					display_tooltip:false,
					display_arrow:true,
					mouseover_pause:false,				
					mouseover_text:false,
					mouseover_info:false,
					mouseover_caption:true,
					mouseover_buttons:true,
					transition:"h.slide",
					transition_speed:800,
					scroll_speed:600,
					vert_size:45,
					horz_size:45,					
					vstripe_delay:100,
					hstripe_delay:100,
					move_one:false,
					shuffle:false,
					mousewheel_scroll:true
				});
			}
		);
	</script>
</head>
<body>
<div class="container">
	<div class="wt-gallery">
        <div class="main-screen">
        	<noscript>
            	<!-- placeholder image when javascript is off -->
             	<img src="images/triworks_abstract27.jpg" alt=""/>
         	</noscript>
        </div>
        <div class="cpanel">
            <div class="thumbs-back"></div>                        
          	<div class="thumbnails">
                <ul>
                    <li>
                        <div>
                            <a href="images/triworks_abstract27.jpg"><img src="images/thumbs/triworks_abstract27.jpg" alt=""/></a>
                            <p>1. Image Caption</p>
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa metus, porttitor a sodales at, porta a libero. 
                                Nullam et mauris vel metus lobortis lacinia at non odio. Donec ultrices sodales bibendum. Donec interdum mattis ipsum sed semper.
                          	</div>
                        </div>
                    </li> 
                    <li>
                        <div>
                            <a href="images/triworks_abstract17.jpg"><img src="images/thumbs/triworks_abstract17.jpg" alt=""/></a>
                            <p>2. Image Caption</p>
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum eu quis omnis referrentur est, mel cu option inimicus dissentiunt. 
                                Et usu vivendum suavitate interpretaris, ei laudem animal mea.
                                Primis pertinax efficiantur an per, ea doming denique theophrastus sea.
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis.
                          	</div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract23.jpg"><img src="images/thumbs/triworks_abstract23.jpg" alt=""/></a>
                            <p>3. Image Caption</p>
                        </div>                             
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tempus nulla.
                          	</div>   
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract38.jpg"><img src="images/thumbs/triworks_abstract38.jpg" alt=""/></a>      
                            <p>4. Image Caption</p>                      
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum no vocibus accusamus dignissim et, eius erat an ius, 
                                quot zzril facilisi an no. 
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis. 
                                Exerci legendos dignissim duo no.
                          	</div>                         	
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract19.jpg"><img src="images/thumbs/triworks_abstract19.jpg" alt=""/></a>                          
                            <p>5. Image Caption</p>                                               	
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum eu quis omnis referrentur est, mel cu option inimicus dissentiunt. 
                                Et usu vivendum suavitate interpretaris, ei laudem animal mea.
                                Primis pertinax efficiantur an per, ea doming denique theophrastus sea.
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis.
                           	</div>      
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract8.jpg"><img src="images/thumbs/triworks_abstract8.jpg" alt=""/></a>
                            <p>6. Image Caption</p>                         	                     	
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tempus nulla.
                           	</div>         
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract21.jpg"><img src="images/thumbs/triworks_abstract21.jpg" alt=""/></a>          
                            <p>7. Image Caption</p>                                                 
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum no vocibus accusamus dignissim et, eius erat an ius, 
                                quot zzril facilisi an no. 
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis. 
                                Exerci legendos dignissim duo no.
                           	</div>     
                        </div>
                    </li>     
                    <li>
                        <div>
                            <a href="images/triworks_abstract34.jpg"><img src="images/thumbs/triworks_abstract34.jpg" alt=""/></a>
                            <p>8. Image Caption</p>                	
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum eu quis omnis referrentur est, mel cu option inimicus dissentiunt. 
                                Et usu vivendum suavitate interpretaris, ei laudem animal mea.
                                Primis pertinax efficiantur an per, ea doming denique theophrastus sea.
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis.
                          	</div>  
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract29.jpg"><img src="images/thumbs/triworks_abstract29.jpg" alt=""/></a>
                            <p>9. Image Caption</p>           
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>                        
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tempus nulla.
                           	</div>       
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract26.jpg"><img src="images/thumbs/triworks_abstract26.jpg" alt=""/></a>
                            <p>10. Image Caption</p>                                    	
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum no vocibus accusamus dignissim et, eius erat an ius, 
                                quot zzril facilisi an no. 
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis. 
                                Exerci legendos dignissim duo no.
                            </div>          
                        </div>        
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract20.jpg"><img src="images/thumbs/triworks_abstract20.jpg" alt=""/></a>
                            <p>11. Image Caption</p>                           
                        </div>  
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>                           	
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum eu quis omnis referrentur est, mel cu option inimicus dissentiunt. 
                                Et usu vivendum suavitate interpretaris, ei laudem animal mea.
                                Primis pertinax efficiantur an per, ea doming denique theophrastus sea.
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis.
                           	</div>   
                        </div>
                    </li>    
                    <li>
                        <div>
                            <a href="images/triworks_abstract7.jpg"><img src="images/thumbs/triworks_abstract7.jpg" alt=""/></a>                            
                            <p>12. Image Caption</p>                                                 	
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>              	
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tempus nulla.
                           	</div>        
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract28.jpg"><img src="images/thumbs/triworks_abstract28.jpg" alt=""/></a>                            
                            <p>13. Image Caption</p>                                                 	
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>              	
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum no vocibus accusamus dignissim et, eius erat an ius, 
                                quot zzril facilisi an no. 
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis. 
                                Exerci legendos dignissim duo no.
                           	</div>        
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract25.jpg"><img src="images/thumbs/triworks_abstract25.jpg" alt=""/></a>                            
                            <p>14. Image Caption</p>                                                 	
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>              	
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum eu quis omnis referrentur est, mel cu option inimicus dissentiunt. 
                                Et usu vivendum suavitate interpretaris, ei laudem animal mea.
                                Primis pertinax efficiantur an per, ea doming denique theophrastus sea.
                                Sit brute laoreet deserunt id, sit at aeterno diceret officiis.
                           	</div>        
                        </div>
                    </li>
                    <li>
                        <div>
                            <a href="images/triworks_abstract18.jpg"><img src="images/thumbs/triworks_abstract18.jpg" alt=""/></a>                            
                            <p>15. Image Caption</p>                                                 	
                        </div>
                        <div class="data">
                            <a href="http://codecanyon.net/user/webtako" target="_blank"></a>              	
                            <div>
                                <h1>JQuery Gallery</h1>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tempus nulla.
                           	</div>        
                        </div>
                    </li>
                </ul>
            </div>            	
        	<div class="thumbs-fwd"></div>
		</div>
	</div>
</div>
</body>
</html>
